<template>
  <div class="page-container">
    <!-- <Homeview /> -->
    <!-- 轮播图区域 - 使用 ElementPlus 走马灯组件 -->
    <div class="carousel-container">
      <el-carousel :interval="3000" arrow="always" indicator-position="outside" @change="handleCarouselChange">
        <el-carousel-item v-for="(item, index) in photo" :key="index">
          <div class="carousel-item-wrapper">
            <img :src="item.photo" alt="轮播图片" class="carousel-image" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 学生信息卡片区域 -->
    <div class="students-container">
      <el-card class="student-card" v-for="(student, index) in students" :key="index" :body-style="{ padding: '0px' }">
        <div class="student-image-container">
          <img :src="student.photo" alt="student-photo" class="student-photo" />
        </div>
        <div class="student-info p-3">
          <div class="font-bold text-lg mb-1">{{ student.name }}</div>
          <div class="text-gray-600 mb-1">{{ student.company }}</div>
          <div class="text-orange-500 font-medium">月薪{{ student.salary }}K</div>
        </div>
      </el-card>
    </div>
    <!-- <home_bottom /> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElCarousel, ElCarouselItem, ElCard } from 'element-plus';
import http from '@/http/index';
import Homeview from './Homeview.vue';
import home_bottom from '../components/home_bottom.vue';

// 状态管理
const students = ref([]);
const photo = ref([]);
const loadingStudents = ref(false);
const loadingCarousel = ref(false);
const errorStudents = ref(null);
const errorCarousel = ref(null);

// 获取学生数据
const fetchStudents = async () => {
  loadingStudents.value = true;
  try {
    const res = await http.get('/students/');
    students.value = res.data;
  } catch (err) {
    errorStudents.value = err.message || '获取学生数据失败';
    console.error('获取学生数据错误:', err);
  } finally {
    loadingStudents.value = false;
  }
};

// 获取轮播图数据
const fetchPhoto = async () => {
  loadingCarousel.value = true;
  try {
    const res = await http.get('/carousel/');
    photo.value = res.data;
  } catch (err) {
    errorCarousel.value = err.message || '获取轮播图数据失败';
    console.error('获取轮播图数据错误:', err);
  } finally {
    loadingCarousel.value = false;
  }
};

// 轮播图切换事件处理
const handleCarouselChange = (currentIndex) => {
  console.log('当前轮播图索引:', currentIndex);
  // 可以添加额外的切换逻辑
};

onMounted(() => {
  fetchStudents();
  fetchPhoto();
});
</script>

<style scoped>
/* 页面整体容器 */
.page-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 轮播图容器 */
.carousel-container {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-item-wrapper {
  height: 470px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* 学生信息容器 */
.students-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* 学生信息卡片样式 */
.student-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.student-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.student-image-container {
  height: 200px;
  overflow: hidden;
}

.student-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.student-card:hover .student-photo {
  transform: scale(1.05);
}
</style>